<template>
    <view class="Search">
        <view class="SearchBox">
            <view class="iconfont icon-btn_search color_99 size38"></view>
            <input type="text" class="Search_Text" v-model="query_text" :placeholder="placeTxt" placeholder-class="place" @confirm="confirm" />
        </view>
    </view>
</template>

<script>
    export default {
        props: ['placeTxt', 'Val'],
        data() {
            return {
                query_text: '' // 搜索
            };
        },
        methods: {
            confirm(e) {
                this.$emit('Search', this.query_text);
                // console.log(this.query_text, 'query_text');
            }
        },
        watch: {
            Val: {
                deep: true,
                immediate: true,
                handler(newVal, oldVal) {
                    console.log(newVal, 'newVal');
                    if (newVal) this.query_text = newVal;
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    .Search {
        width: 100%;
        height: 120rpx;
        background-color: #fff;
        padding: 0 20rpx;
        display: flex;
        align-items: center;
        .SearchBox {
            width: 100%;
            height: 80rpx;
            background-color: $page;
            display: flex;
            align-items: center;
            padding: 0 20rpx;
            overflow: hidden;
            .Search_Text {
                flex: 1;
                height: 100%;
                padding-left: 20rpx;
                font-size: 26rpx;
            }
            .place {
                color: #999;
            }
        }
    }
</style>
